<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../data/unpkg.com_vue@2.7.14_dist_vue.js"></script>
    <script src="../data/unpkg.com_element-ui@2.15.13_lib_index.js"></script>
    <script src="../data/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../data/unpkg.com_element-ui@2.15.13_lib_theme-chalk_index.css">
</head>
<body>

<div id="app">

    <template>
        <div v-infinite-scroll="load" class="infinite-list" style="overflow:auto;height:calc(102vh - 35px);margin: 0px">

            <ul style="margin: auto; width: 800px">

                <div :userinfo="userinfo" style="width: 800px;height: 200px">

                    <div style="float: left;">
                        <el-image
                                style="width: 100px; height: 100px;border-radius: 50px"
                                :src="url"></el-image>
                    </div>
                    
                    <div style="float: left;margin-left: 50px">
                        <h1 style="margin-top: 0px">{{userinfo.user.nickname}}</h1>
                        <b>{{userinfo.tops}}</b><span>获赞</span>
                        <b>{{userinfo.fans}}</b><span>粉丝</span>
                        <b>{{userinfo.concern}}</b><span>关注</span>
                        <p>简介:{{userinfo.user.signature}}</p>
                    </div>

                </div>

                <li v-for="(i,index) in count" class="infinite-list-item" style="list-style: none">

                    <div style="width: 100%;height: 100px">
                        <h3><a>{{message[index].articleTitle}}</a></h3>
                        <p>
                            <span>{{message[index].pageView}}阅读</span>
                            <span>{{message[index].comments}}评论</span>
                            <span>{{message[index].articleTime}}</span>
                        </p>
                    </div>

                </li>
            </ul>
        </div>
    </template>

</div>
</body>

<script>
    var Main = {
        data() {
            return {
                id: '1',
                count: 7,
                url: '',
                message: [],
                userinfo: '',
            }
        },
        /*一打开页面就执行方法*/
        created() {
            /*加载文章方法*/
            this.load();
            /*加载个人信息方法*/
            this.personalData();
        },
        methods: {
            load() {
                this.count += 3
                axios({
                    method: 'get',
                    url: '/user/article.do?id=' + this.id + '&size=' + this.count,
                }).then(res => {
                    console.log(res.data.data)
                    /*给数组赋值*/
                    this.message = res.data.data;
                })
            },
            personalData() {
                axios({
                    method: 'get',
                    url: '/user/home.do?id=' + this.id,
                }).then(res => {
                    console.log(res.data.data)
                    /*给数组赋值*/
                    this.userinfo = res.data.data;
                    /*给头像赋值*/
                    this.url = res.data.data.user.headImg;
                })
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>

</html>